<!DOCTYPE html>
<html lang="en">

<head>
	<!-- <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap-grid.css" rel="stylesheet"> -->
	<link href="./vendor/bootstrap-grid.css" rel="stylesheet">
	<meta charset="utf-8" />
	<link rel="apple-touch-icon" sizes="76x76" href="./assets/img/favicon.ico">
	<link rel="icon" type="image/png" href="./assets/img/favicon.ico">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>数据要素流通平台</title>
	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
		name='viewport' />


	<!-- Font Awesome Icons -->
	<!-- <link rel="stylesheet" href="#" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> -->
	<link rel="stylesheet" href="#" crossorigin="anonymous">
	<link href="./assets/layui/css/layui.css" rel="stylesheet">
	<!-- Main CSS -->
	<link href="./assets/css/main.css" rel="stylesheet" />

	<!-- Animation CSS -->
	<link href="vendor/aos.css" rel="stylesheet" />
	<style>
		.nav-item .active {
			font-weight: 600;
		}

		.card-deck {
			margin-bottom: 15px;
		}

		.ServiceMenu .card-body {
			width: 80px;
			height: 80px;
			overflow: hidden;
			cursor: pointer;
			padding: 0 !important;
			flex: none;
			margin: 10px auto;
		}

		.card-body ul li {
			margin-bottom: 0px !important;
		}

		h3 {
			font-size: 1rem !important;
		}

		.searchHeaderBox {
			position: absolute;
			top: 83px;
			z-index: 1999;
			background-color: white;
			width: 400px;
			left: 856px;
			padding: 10px;
		}

		.searchHeaderBox .label {
			padding: 3px 8px;
			border: 1px solid #d8d8d8;
			margin-right: 12px;
			margin-bottom: 10px;
		}

		::-webkit-input-placeholder {
			/* WebKit browsers */
			color: #999;
			font-size: 14px;
		}

		::-moz-placeholder {
			/* Mozilla Firefox 19+ */
			color: #999;
			font-size: 14px;
		}

		:-ms-input-placeholder {
			/* Internet Explorer 10+ */
			color: #999;
			font-size: 14px;
		}
	</style>
</head>

<body>

	<!----------------------------------------------------------------------
NAVBAR (remove topnav if you don't want changed nav background on scroll)
------------------------------------------------------------------------>
	<nav class="topnav navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
		<div class="container-fluid">
			<a class="navbar-brand" href="./index.html"><i class="fas fa-globe-africa mr-2"></i><strong>数据流通云</strong>
			</a>
			<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarColor02"
				aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="navbar-collapse collapse" id="navbarColor02">
				<ul class="navbar-nav mr-auto d-flex align-items-center">
					<li class="nav-item">
						<a class="nav-link" href="./index.html">首页</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="./dataResources.html">数据资源</a>
					</li>
					<li class="nav-item dropdown">
						<a class="nav-link" href="productStore.html">数据产品 </a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="./serviceStore.html">服务产品</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="./customShop.html">定制数据</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="./developer.html">开发者</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="./newMessage.html">最新消息</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="./accessData.html">数据访问</a>
					</li>
					<li class="nav-item highSerachBtn">
						<div class="col pt-4 pb-4">
							<a class="btn btn-lg btn-outline-white btn-round searchKeyword text-white"><span
									class="iconbox border-0" style="margin-right: 5px;"><i
										class="fas fa-search"></i></span>搜索</a>
						</div>
					</li>
				</ul>
				<ul class="navbar-nav ml-auto d-flex align-items-center">
					<li class="nav-item">
						<a class="nav-link myBtn" href="javascript:;">
							<span class="iconbox border-0" style="margin-right: 5px;"><i
									class="fas fa-cart-arrow-down"></i></span>产品袋
						</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="./mySpace.html">
							<span class="iconbox border-0" style="margin-right: 5px;"><i
									class="fas fa-book-reader"></i></span>我的空间 </a>
					</li>
					<li class="nav-item disabledNone" id="userInfo">
						<ul class="layui-nav" style="background-color: rgba(244, 244, 244, 0);padding: 0;">
							<li class="layui-nav-item">
							  <a href="javascript:;" style="color: #353c58 !important;">
								  <span class="iconbox border-0" style="margin-right: 5px;"><i class="iconfont icon-user-fill"></i></span>
								  用户：<span id="accunt">登录过期</span>
							  </a>
							  <dl class="layui-nav-child">
								<dd><a href="./changePassword.html">修改密码</a></dd>
								<dd><a href="" id="logOutBtn">退出登录</a></dd>
							  </dl>
							</li>
						  </ul>
					</li>
					<li class="nav-item disabledNone" id="attestation">
						<a class="nav-link" style="color:#FF820C;padding-left: 0px;font-size:12px;cursor: pointer;">未认证</a>
					</li>
					<li class="nav-item disabledNone noUser">
						<a class="nav-link" href="./login.html">
							<span class="iconbox border-0" style="margin-right: 5px;"><i
									class="fas fa-user"></i></span>登录 </a>
					</li>
					<li class="nav-item disabledNone noUser">
						<span class="nav-link" href="./register.html">
							<a class="btn btn-cyan btn-round shadow-sm text-white" href="#" data-toggle="modal"
								data-target="#modal_newsletter">
								<i class="fab fa-github"></i> 立即注册 <a href="#" class="downloadzip" class="hidden"></a>
							</a>
						</span>
					</li>
				</ul>
			</div>
		</div>
	</nav>
	<!-- End Navbar -->
	<!-- 顶部搜索框 -->
	<div class="searchHeaderBox disabledNone">
		<div>
			<span style="position: absolute;right: 20px;cursor: pointer;z-index: 9999;"
				id="closeSearchHeaderBox">X</span>
			<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
				<ul class="layui-tab-title">
					<li class="layui-this">关键字</li>
					<li>级别限制</li>
					<li>授权码</li>
				</ul>
				<div class="layui-tab-content">
					<div class="layui-tab-item layui-show">
						<div class="col" style="padding: 0;position: relative;">
							<img src="assets/img/demo/serach.png"
								style="width: 20px;height: 20px;position: absolute;left: 0;top: 7px;">
							<input type="search" class="form-control" placeholder="请输入关键字进行搜索"
								style="border-top:0px;border-left:0px;border-right:0px;border-radius: 0;padding-left: 30px;">
							<span
								style="cursor: pointer;position: absolute;top: 7px;right: 10px;font-size: 14px;">搜索</span>
						</div>
						<div class="mt-3">
							<p style="font-size: 12px;color: #666666;margin-bottom: 5px;">搜索发现</p>
							<div style="font-size: 12px;color: #666666;">
								<span class="label">规范</span>
								<span class="label">授权码</span>
								<span class="label">级别</span>
								<span class="label">消息</span>
							</div>
						</div>
					</div>
					<div class="layui-tab-item">
						<div class="col" style="padding: 0;position: relative;">
							<img src="assets/img/demo/serach.png"
								style="width: 20px;height: 20px;position: absolute;left: 0;top: 7px;">
							<input type="search" class="form-control" placeholder="请输入限制用户级别"
								style="border-top:0px;border-left:0px;border-right:0px;border-radius: 0;padding-left: 30px;">
							<span
								style="cursor: pointer;position: absolute;top: 7px;right: 10px;font-size: 14px;">搜索</span>
						</div>

					</div>
					<div class="layui-tab-item">
						<div class="col" style="padding: 0;position: relative;">
							<img src="assets/img/demo/serach.png"
								style="width: 20px;height: 20px;position: absolute;left: 0;top: 7px;">
							<input type="search" class="form-control" placeholder="请输入授权码"
								style="border-top:0px;border-left:0px;border-right:0px;border-radius: 0;padding-left: 30px;">
							<span
								style="cursor: pointer;position: absolute;top: 7px;right: 10px;font-size: 14px;">搜索</span>
						</div>

					</div>
				</div>
			</div>
		</div>

	</div>

	<!------------------------------------- HEADER --------------------------------------->
	<header>
		<div class="jumbotron jumbotron-lg jumbotron-fluid mb-0 pb-3 bg-primary position-relative">
			<div class="container-fluid text-white h-100">
				<div class="d-lg-flex align-items-center justify-content-between text-center pl-lg-5">
					<div class="col pt-4 pb-4">
						<h1 class="display-3"><strong id="dataTitle">应用详情</strong></h1>
					</div>
					<div
						class="col align-self-bottom align-items-right text-right h-max-380 h-xl-560 position-relative z-index-1">
						<img src="assets/img/demo/ali/yingyong.gif" class="rounded img-fluid">
					</div>
				</div>
			</div>

	</header>

	<main class="container">
		<!-------------------------------------- PRICING --------------------------------------->
		<section class="pt-4 pb-5" data-aos="fade-up">
			<h3 class="h5 mb-4 font-weight-bold">使用应用</h3>
			<div class="col-md-11 pl-5">
				<form id="form1">
					<div class=" mt-3">
						<div class="col mb-3">
							<label>短信模板</label>
							<select class="form-control" id="SMStemplate">
								<option style="display: none;"></option>
							</select>
						</div>

						<div class="col mb-3">
							<label>短信签名</label>
							<select class="form-control" id="SMSsignature">
								<option style="display: none;"></option>
							</select>
						</div>
					</div>
					<div class="">
						<div class="col mb-3">
							<label>模板内容</label><textarea class="form-control" id="ControlTextarea" rows="3"
								placeholder="请选择短信模板" disabled=""></textarea>
						</div>
					</div>
					<div class="" id="TemplateParames">

					</div>
					<div class="p-3  mb-5 disabledNone" id="BusinessList">
						<!-- table -->
						<div class="mb-3">企业信息
							<button class="btn btn-cyan btn-round text-white"
								style="float: right;font-size: 12px;height: 30px;" id="searchBusinessBtn">搜索</button>
							<input type="text" class="form-control input-round" placeholder="搜索企业名称关键字"
								id="searchBusiness"
								style="width: 200px;float: right;margin-right: 10px;font-size: 12px;height: 30px;">
						</div>
						<table class="table" id="businessTable">
							<thead class="thead-dark">
								<tr>
									<th scope="col"> <input type="checkbox" id="SelectAllCheckbox" /> </th>
									<th scope="col"> #</th>
									<th scope="col"> 企业名称 </th>
									<th scope="col"> 法定代表人 </th>
									<th scope="col"> 联系员姓名 </th>
									<th scope="col"> 联系员电话 </th>
								</tr>
							</thead>
							<tbody>

							</tbody>
						</table>
						<!-- <nav aria-label="Page navigation example" style="float: right;">
				<ul class="pagination">
					<li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-left"></i></a></li>
					<li class="page-item active"><a class="page-link" href="#">1</a></li>
					<li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-right"></i></a></li>
				</ul>
			</nav> -->
					</div>
					<div class="disabledNone" id="InputTelBox">
						<div class="col mb-3">
							<label>手机号码</label><input type="text" class="form-control " placeholder="请填写手机号码"
								id="InputTel" required="">
						</div>
					</div>

					<button type="submit" class="btn btn-cyan btn-round text-white mt-3">立即执行</button>
				</form>
			</div>

		</section>

	</main>

	<!-------------------------------------- FOOTER 底部 --------------------------------------->
	<footer class="bg-black pb-5" style="padding-top: 20px;padding-bottom: 20px !important;background-color: #03CA93;">
		<div class="container">
			<div class="row" style="text-align: center;">
				<div class="col-12 col-md mr-4">
					<small class="d-block mt-3 text-muted" style="color: white !important;">
						<p style="color: white;margin-top: 10px;font-size: 30px;">数据要素流通平台</p>
						Copyright @ 2022 数据要素流通平台-版权所有 蜀ICP备202223603号
					</small>
				</div>
			</div>
		</div>
	</footer>



	<!-------------------------------------- JAVASCRIPTS --------------------------------------->
	<script src="vendor/jquery.min.js" type="text/javascript"></script>
	<script src="vendor/popper.min.js" type="text/javascript"></script>
	<script src="vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="vendor/share.js" type="text/javascript"></script>
	<script src="js/functions.js" type="text/javascript"></script>
	<!-- <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/js/bootstrap.bundle.js"></script> -->
	<script src="./vendor/bootstrap.bundle.js"></script>
	<script src="./assets/layui/layui.js" type="text/javascript"></script>
	<script src="js/tool.js" type="text/javascript"></script>
	<script src="js/header.js" type="text/javascript"></script>
	<!-- tab事件-->
	<script>
		$(function () {
			$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
				// 获取已激活的标签页的名称
				var activeTab = $(e.target).text();
				// 获取前一个激活的标签页的名称
				var previousTab = $(e.relatedTarget).text();
				$(".active-tab span").html(activeTab);
				$(".previous-tab span").html(previousTab);
			});
		});
	</script>
	<!-- Animation -->
	<script src="vendor/aos.js" type="text/javascript"></script>
	<noscript>
		<style>
			*[data-aos] {
				display: block !important;
				opacity: 1 !important;
				visibility: visible !important;
			}
		</style>
	</noscript>
	<script>
		AOS.init({
			duration: 700
		});
	</script>

	<!-- Disable animation on less than 1200px, change value if you like -->
	<script>
		AOS.init({
			disable: function () {
				var maxWidth = 1200;
				return window.innerWidth < maxWidth;
			}
		});
	</script>

	<!-- Carousel Height Smooth -->
	<!-- <script>
    $('.carousel').on('slide.bs.carousel', function (event) {
      var height = $(event.relatedTarget).height();
      var $innerCarousel = $(event.target).find('.carousel-inner');
      $innerCarousel.animate({
        height: height
      });
    });
    </script> -->

	<!-- Popovers -->
	<script>
		$(function () {
			$('[data-toggle="popover"]').popover()
		})
		$('.popover-dismiss').popover({
			trigger: 'focus'
		})
	</script>

	<!-- Tooltips -->
	<script>
		$(function () {
			$('[data-toggle="tooltip"]').tooltip()
		})
	</script>

	<script>
		$(function () {
			var dataInfo = {};
			var templateArr = [];
			var telArr = [];
			var companyList = [];
			const parameArr = ["code", "appname", "action", "MapName", "mapName", "time", "location", "shijianID"];
			var CompanyServerId = "";
			function getUrlParam(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
				var r = window.location.search.substr(1).match(reg);  //匹配目标参数
				if (r != null) return unescape(r[2]); return null; //返回参数值
			}

			function SMSDataRequest() {
				$.ajax({
       timeout:30000,
					type: 'GET',
					url: window.Http + "/customer/server/item?serverId=" + getUrlParam('serverId'),
					headers: {
						'Authorization': "Bearer " + sessionStorage.getItem('Token')
					},
					success: function (res) {
						if (res.code == 200) {
							dataInfo = res.data;
							$("#dataTitle").text(res.data.chineseName);
							if (dataInfo.templateList && dataInfo.templateList.data.length > 0) {
								let html = ""
								dataInfo.templateList.data.forEach(function (val, index) {
									html += `<option value="` + val.templateId + `">` + val.name + `</option>`
								})
								$("#SMStemplate").append(html);
								templateArr = dataInfo.templateList.data;
							}
							if (dataInfo.singList && dataInfo.singList.data.length > 0) {
								let html = ""
								dataInfo.singList.data.forEach(function (val, index) {
									html += `<option value="` + val.signId + `">` + val.name + `</option>`
								})
								$("#SMSsignature").append(html);
							}
							if (dataInfo.companyServerId) {
								$("#BusinessList").removeClass("disabledNone");
							} else {
								$("#InputTelBox").removeClass("disabledNone");
							}
							if (dataInfo.companyList && dataInfo.companyList.code == 200) {
								SmsBusiness(dataInfo.companyList.data);
								companyList = dataInfo.companyList.data;
							}
							if (dataInfo.companyServerId) {
								CompanyServerId = dataInfo.companyServerId;
							}

						} else if (res.code == 401) {
							layer.msg("请先进行登录操作");
						}
					}
				})
			}

			SMSDataRequest();

			//处理企业短信
			function SmsBusiness(data) {
				let html = "";
				$("#businessTable tbody").empty();
				data.forEach(function (val, index) {
					html += `<tr>
						<th scope="row" data-Id="`+ val.qyid + `"> <input type="checkbox" class="checkbox"/> </th>
			  			<th scope="row">`+ (index + 1) + `</th>
			  			<td>`+ val.qymc + `</td>
			  			<td>`+ val.fddbr + `</td>
			  			<td>`+ val.llyxm + `</td>
			  			<td>`+ (val.llylxdh.substring(0, 3) + "****" + val.llylxdh.substr(val.llylxdh.length - 4)) + `</td>
			  		</tr>`
				})
				$("#businessTable tbody").append(html);
			};


			$('#SMStemplate').change(function () {
				$("#TemplateParames").empty();
				let templateId = $("#SMStemplate").val();
				templateArr.forEach(function (val, index) {
					if (val.templateId == templateId) {
						$("#ControlTextarea").val(val.template);
						AddTemplateParames(val.template);
					}
				})
			})
			//添加模板参数修改
			function AddTemplateParames(dataStr) {
				parameArr.forEach(function (val) {
					let html = "";
					if (dataStr.indexOf(val) != -1) {
						html += `<div class="col mb-3">
						<label>模板参数`+ val + `</label><input type="text" class="form-control" name="` + val + `">
					</div>`
					}
					$("#TemplateParames").append(html);
					let oldParame = val;
					$("input[name=" + val + "]").bind('input propertychange change', function () {
						let templateVal = $(this).val();
						console.log(templateVal)
						console.log(oldParame)
						let templateContVal = $("#ControlTextarea").val();

						let searchText = oldParame;//获取你输入的关键字；
						let regExp = new RegExp(searchText, "g");//创建正则表达式，g表示全局的，如果不用g，则查找到第一个就不会继续向下查找了；
						if (templateVal) {
							let newStr = templateContVal.replace(regExp, templateVal);//将找到的关键字替换

							//console.log(newStr)
							$("#ControlTextarea").val(newStr);
							oldParame = templateVal;
						}
					})
				})

			}

			//短信提交
			$('#form1').on('submit', function (e) {
				e.preventDefault();
				let Tel = $("#InputTel").val();
				let template = $("#SMStemplate").val();
				let signature = $("#SMSsignature").val();
				let dataStr = {
					serverId: getUrlParam('serverId'),
					templateId: template,
					signId: signature,
					phoneNumber: Tel
				}
				let InputTexts = $('#form1').find(':text');
				for (let i = 0; i < InputTexts.length; i++) {
					let parame_val = InputTexts.eq(i).val();
					let parame_name = InputTexts.eq(i).prop('name');
					if (parame_name) {
						parameArr.forEach(function (val) {
							if (val == parame_name) {
								dataStr[val] = parame_val;
							}
						})
					}
				}
				SmsRequstAjax(dataStr);
			});

			//短信请求数据
			function SmsRequstAjax(dataStr) {
				$.ajax({
       timeout:30000,
					type: 'GET',
					url: window.Http + "/server/item/execute",
					data: dataStr,
					headers: {
						'Authorization': "Bearer " + sessionStorage.getItem('Token')
					},
					success: function (res) {
						if (res.code == 200 && res.data.errorCode) {
							layer.msg(res.data.error);
						} else {
							layer.msg(res.msg);
						}
					},
					error: function (err) {
						layer.msg(err.msg);
					}
				})
			}

			$("#businessTable").delegate(".checkbox", "click", function () {
				let dataId = $(this).parent("th").attr("data-Id");
				let dataArr = companyList.filter(function (item) {
					return item.qyid == dataId;	// 过滤数组
				})
				if ($(this).is(':checked')) {
					if (dataArr[0].llylxdh) {
						telArr.push(dataArr[0].llylxdh);
					}
				} else {
					let newArr = telArr.filter(function (item) {
						return item != dataArr[0].llylxdh;	// 过滤数组
					})
					telArr = newArr;
				}

				$("#InputTel").val(telArr);
			});
			$("#SelectAllCheckbox").click(function () {
				if ($(this).is(':checked')) {
					companyList.forEach(function (val, index) {
						if (val.dh) {
							telArr.push(val.dh)
						}
					})
					$("#businessTable").find(".checkbox").attr('checked', true);;
				} else {
					telArr = [];
					$("#businessTable").find(".checkbox").attr('checked', false);;
				}
				$("#InputTel").val(telArr);
			})
			$("#searchBusinessBtn").click(function () {
				let searchVal = $("#searchBusiness").val();
				if (searchVal) {
					$.ajax({
       timeout:30000,
						type: 'GET',
						url: window.Http + "/server/item/execute",
						headers: {
							'Authorization': "Bearer " + sessionStorage.getItem('Token')
						},
						data: { serverId: CompanyServerId, qymc: searchVal },
						success: function (res) {
							if (res.code == 200) {
								if (res.data.data) {
									SmsBusiness(res.data.data);
									companyList = res.data.data;
								}
							}
						}
					})
				}
			})



		})
	</script>

</body>

</html>
